<template>
	<view style="background-color: #F5F5FA;">
		<!-- <navigationBarVue :bgImgType="0" navigationTitle="入驻店铺" /> -->
		<uni-nav-bar title="商户入住" leftIcon="back" backgroundColor="#F5F5FA" color="white" @clickLeft="bk"></uni-nav-bar>
		<view class="" style="padding: 30rpx 25rpx;">
			<text>基本信息</text>
		</view>
		<view class="box">
			<view class="box-vue">
				<view class="text-input">
					<view class="text-a">
						<text class="sa">*</text>
						<text>姓名</text>
					</view>
					<input type="text" placeholder="请输入您的姓名（必填）" v-model="dataInfo.name" />
				</view>
			</view>
			<view class="box-vue">
				<view class="text-input">
					<view class="text-a">
						<text class="sa">*</text>
						<text>性别</text>
					</view>

					<input type="text" placeholder="请选择您的性别（必填）" v-model="dataInfo.xb" />
				</view>
			</view>
			<view class="box-vue">
				<view class="text-input">
					<view class="text-a">
						<text class="sa">*</text>
						<text>手机号</text>
					</view>

					<input type="number" placeholder="请输入您的手机号（必填）" v-model="dataInfo.sjh" />
				</view>
			</view>
			<view class="box-vue">
				<view class="text-input" style="border: 0;">
					<view class="text-a">
						<text class="sa">*</text>
						<text>商家名称</text>
					</view>

					<input type="text" placeholder="请输入您的手机号（必填）" v-model="dataInfo.sjmc" />
				</view>
			</view>
		</view>

		<view class="box-scanner">
			<view class="box">
				<view>
					<view class="text">
						<text class="text1">营业执照</text>
						<text class="text2">上传营业执照</text>
					</view>
				</view>
				<view>
					<uploadColumnVue :item="pnumber" v-model="dataInfo.yyzz" />
				</view>
			</view>
		</view>
		<view class="box-scanner">
			<view class="box">
				<view>
					<view class="text">
						<text class="text1">手持身份证</text>
						<text class="text2">上传您的手持身份证图片</text>
					</view>
				</view>
				<view>
					<uploadColumnVue :item="pnumber" v-model="dataInfo.rlsb" />
				</view>
			</view>
		</view>
		<view class="box-scanner">
			<view class="box">
				<view>
					<view class="text">
						<text class="text1">身份证正面</text>
						<text class="text2">上传您的身份证正面</text>
					</view>
				</view>
				<view>
					<uploadColumnVue :item="pnumber" v-model="dataInfo.zfzzm" />
				</view>
			</view>
		</view>
		<view class="box-scanner">
			<view class="box">
				<view>
					<view class="text">
						<text class="text1">身份证反面</text>
						<text class="text2">上传您的身份证反面</text>
					</view>
				</view>
				<view>
					<uploadColumnVue :item="pnumber" v-model="dataInfo.zfzfm" />
				</view>
			</view>
		</view>

		<view style="display: flex;justify-content: flex-start;align-items: center;padding: 25rpx;">
			<radio @click="dyxz" />
			<text style="margin: 0 15rpx;">确认同意</text>
			<text style="color: red;">《商家入住协议》</text>
		</view>
		<view class="" style="height: 100rpx;">
		</view>
		<view @click="tj" class="foottj" style="display: flex;justify-content: center;align-items: center;">
			<text style="color: white;font-size: 35rpx;">申请成为商家</text>
		</view>
	</view>
</template>

<script>
	import navigationBarVue from '../components/navigationBar/navigationBar.vue';
	import uploadColumnVue from '@/components/uploadColumnVue.vue';
	export default {
		components: {
			navigationBarVue,
			uploadColumnVue
		},
		data() {
			return {
				xz: false,
				pnumber: {
					tp: 1,
				},
				topHeight: 0, //顶部高度
				dataInfo: {
					name: '', //姓名
					xb: '', //性别
					sjh: '', //手机号
					sjmc: '', //商家名称
					yyzz: '', //营业执照
					rlsb: '', //人脸识别
					zfzzm: '', //身份证正面
					zfzfm: '', //身份证反面
				},
			}
		},
		computed: {
			list() {
				return []
			}
		},

		onLoad(options) {
			uni.request({
				url: 'https://www.lichu2025.cn/api/increased.index/check_shop',
				method: 'post',
				data: {},
				header: {
					'token': uni.getStorageSync('wanlshop:user').token,
				},
				success: (res) => {
					console.log(res.data)
					console.log(1111)
					if (res.data.status == '2') {
						uni.showModal({
							title: '温馨提示',
							content: '审核中',
							showCancel: false,
							confirmColor: '#F00000',
							success: (res) => {
								if (res.confirm) {
									console.log('用户点击确定');
									uni.switchTab({
										url: '/pages/index/index'
									});
								}
							}
						});
					}else if(res.data.status == '4'){
						uni.showModal({
							title: '审核失败',
							content: '原因：来了',
							showCancel: false,
							confirmColor: '#F00000',
							success: (res) => {
								if (res.confirm) {
									console.log('用户点击确定');
									uni.switchTab({
										url: '/pages/index/index'
									});
								}
							}
						});
					}
				},
				fail: (err) => {
					console.error('请求失败：', err);
				}
			});
			// uni.showModal({

			// })
		},
		methods: {
			dyxz() {
				this.xz = true
				console.log(this.xz)
			},
			tj() {
				let that = this
				if (!this.xz) {
					uni.showToast({
						title: '请勾选用户协议',
						duration: 2000
					});
					return
				}
				uni.request({
					url: '/increased.index/ApplyShop',
					method: 'post',
					data: {
						shopname: this.dataInfo.sjmc,
						mobile: this.dataInfo.sjh,
						face: this.dataInfo.rlsb,
						name: this.dataInfo.name,
						sex: this.dataInfo.xb,
						image: this.dataInfo.yyzz,
						id_card_frontage: this.dataInfo.zfzzm,
						id_card_opposite: this.dataInfo.zfzfm,
					},
					success: (res) => {
						console.log(res.data)
						uni.showToast({
							title: '提交成功',
							duration: 1500
						});
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/index/index'
							});
						}, 2000)
					},
					fail: (err) => {
						console.error('请求失败：', err);
					}
				});
			},
			bk() {
				uni.switchTab({
					url: '/pages/index/index'
				});
			}
		},

	}
</script>

<style lang="scss" scoped>
	.wrap-item {
		padding: 0;
	}

	.box {
		width: 100%;
		// height: ;
		padding: 0 25rpx;
		border-radius: 15rpx;

		.box-vue {
			width: 100%;

			background-color: white;
			padding: 0 15rpx;

			.text-input {
				border-bottom: 1rpx solid #E9E9E9;
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 120rpx;

				.text-a {
					.sa {
						color: red;
					}

					display: flex;
					justify-content: flex-start;
					align-items: center;


				}

				input {
					display: inline-block;
					width: 50%;
					text-align: right;

				}
			}
		}
	}

	.box-scanner {
		padding: 25rpx 25rpx 0rpx 25rpx;

		.box {
			background-color: white;
			border-radius: 15rpx;
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.text {
				display: flex;
				flex-direction: column;

				.text1 {
					font-size: 32rpx;
					color: #333333;
				}

				.text2 {
					font-size: 28rpx;
					color: #C0BFC0;
					margin-top: 20rpx;
				}
			}
		}
	}

	.foottj {
		border-radius: 15rpx;
		position: fixed;
		left: 0rpx;
		bottom: 10rpx;
		width: 100%;
		z-index: 99;
		width: 96%;
		height: 90rpx;
		margin-left: 2%;
		background-color: red;
	}
</style>